<template>
	<div id="withdrawal_list">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-select v-model="params.status" placeholder="审核状态" clearable @change="search">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in statusList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.tenantId" placeholder="选择分站" @change="search" clearable>
					<el-option v-for="item in tenantList" :label="item.company" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
            <el-form-item>
				<el-input v-model="params.busId" placeholder="商家ID" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.type" placeholder="提现类型" clearable @change="search">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in typeList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker
					@change = 'timeChange'
					v-model="timeArr"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" stripe v-loading="loading">
			<el-table-column 
				label="分站"
				align="center">
				<template slot-scope="scope">
					<span v-for="item in tenantList" v-if="item.id == scope.row.tenantId">{{item.company}}</span>
				</template>
			</el-table-column>
            <el-table-column align="center" label="商家Id" prop="busId"></el-table-column>
			<el-table-column align="center" label="提现类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">银行卡</span>
                    <span v-if="scope.row.type == 2">支付宝</span>
                    <span v-else>微信</span>
                </template>
            </el-table-column>
			<el-table-column align="center" label="所属银行">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">{{scope.row.bankName}}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
			<el-table-column align="center" label="银行卡号">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">{{scope.row.bankNum}}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
			<el-table-column align="center" label="支付宝账号">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 2">{{scope.row.account}}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            
			<el-table-column align="center" label="提现金额" prop="money"></el-table-column>
			<el-table-column align="center" label="真实姓名" prop="realName"></el-table-column>
			<el-table-column align="center" label="审核状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status===1">通过</span>
					<span v-if="scope.row.status===0">审核中</span>
					<span v-if="scope.row.status===-1">不通过</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="不通过理由" prop="reason"></el-table-column>
			<el-table-column align="center" label="创建时间">
				<template slot-scope="scope">
					{{$common.getDate(scope.row.createTime)}}
				</template>
			</el-table-column>
            <el-table-column align="center" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button  v-if="scope.row.status === 0" @click="audit(scope.row,1)" size="small" type="primary">通过</el-button>
                    <el-button  v-if="scope.row.status === 0" @click="audit(scope.row,2)" size="small" type="danger">不通过</el-button>
                </template>
            </el-table-column>
		</el-table>
		<el-pagination 
            background 
            @size-change="handleSizeChange"
            @current-change="getList" 
            :current-page.sync="params.pageNo"
		    :page-sizes="[10, 20, 50, 100]" 
            :page-size="params.pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					status: 0,
                    type: '',
                    tenantId:'',
                    busId:'',
					isCount: true,
					startTime: '',
					endTime: '',
					pageNo: 1,
					pageSize: 10,
                },
                formData:{
                    type:1,
                    bankName: '',
                    bankNum: '',
                    realName: '',
                    money: '',
                    password: '',
                },
                dialogVisible:false,
				total: 100,
				statusList: [
					{
						value: 1,
						label: '通过'
					},
					{
						value: 0,
						label: '审核中'
					},
					{
						value: -1,
						label: '不通过'
					}
                ],
                typeList: [
					{
						label: '银行卡提现',
						value: 1
					},
					{
						label: '支付宝提现',
						value: 2
					},
					{
						label: '微信提现',
						value: 3
					}
                ],
				timeArr: [],
                list: [],
                info: {},
				loading: false,
				tenantList: [],
			};
		},
		
		watch: {},
		
		created(){
            this.getTenantList()
		},
		
		mounted(){
			this.getList()
		},
		
		methods:{
			getTenantList(){
				this.$request.post({
					url: '/ad/tenant/allList',
					success: res => {
						this.tenantList = res
					}
				})
			},
            audit(row,flag){
                if(flag==2){
                    this.$prompt('请输入理由', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /\S/,
                        inputErrorMessage: '理由不能为空'
                    }).then(({ value }) => {
                        this.$request.post({
                            url:'/ad/busWithdrawals/audit',
                            params:{
                                id:row.id,
                                reason:value,
                                status:-1
                            },
                            success:res=>{
                                this.$message.success('操作成功')
                                this.getList()
                            }
                        })
                    }).catch(() => {
                        this.$message.defaultMsg('取消输入');       
                    });
                }else{
                    this.$request.post({
                        url:'/ad/busWithdrawals/audit',
                        params:{
                            id:row.id,
                            status:1
                        },
                        success:res=>{
                            this.$message.success('操作成功')
                            this.getList()
                        }
                    })
                }
                
            },
			handleSizeChange(e){
				this.params.pageSize = e
				this.params.isCount = true
				this.getList()
			},
			search(){
				this.params.pageNo = 1
				this.params.isCount = true
				this.getList()
			},
			timeChange(val){
				if(val){
					this.params.startTime = this.$common.getDate(val[0]);
					this.params.endTime = this.$common.getDate(val[1]);
				}else{
					this.params.startTime = ''
					this.params.endTime = ''
				}
			},
			getList(){
				this.loading = true
				this.$request.post({
					url:'/ad/busWithdrawals/list',
					params: this.params,
					success: res => {
						this.list = res.list
						if (this.params.isCount) {
							this.params.isCount = false
							this.total = res.total
						}
					},
					finally: res => {
						this.loading = false
					}
				})
			}
		},
		
		beforeDestroy() {} 
	}
</script>

<style>

</style>

<style lang="scss" scoped>
#withdrawal_list{
	.el-pagination{
        text-align: right;
        padding-top: 20px;
    }
    .el-dialog__wrapper{
        .el-select,.el-input{
            width: 80%;
        }
    }
}
</style>
